
import React, { useState, useContext } from 'react'
import cont from '../assets/js/cont'
import detailBuild from '../assets/css/detailBuild.module.css'
import { Modal, message } from 'antd';
import axios from '../axios/index';

export default function DetailBuild(props) {
    const { info, getData } = props
    let act = useContext(cont);
    let [n, setN] = useState(1)
    let [floor, setFloor] = useState(0)
    const [isModalOpen, setIsModalOpen] = useState(false);
    let [id, setId] = useState(0)

    function getImg(url) {
        return new URL(url, import.meta.url).href
    }

    function NumberList(number) {
        const items = Array.from({ length: number }, (_, index) => index + 1); return items
    }

    const handleOk = () => {
        setIsModalOpen(false);
        act.changeDetail()
        axios.delete('/api/build/delete', {
            params: {
                id: id
            }
        }).then((res) => {
            getData()
        })
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    let deleteBuild = (id) => {
        setIsModalOpen(true)
        setId(id)
    }



    return (
        <div className={detailBuild.cover}>
            <img src={getImg('../assets/images/close.png')} alt="" onClick={() => {
                act.changeDetail()
            }} />
            {info.map((item, index) => {
                return (
                    <div key={item.id} className={detailBuild.detail}>
                        <div className={detailBuild.head}>
                            <span>{item.name}</span>
                            <div className={detailBuild.action}>
                                <div className={detailBuild.edit}>编辑</div>
                                <div onClick={() => { deleteBuild(item.id) }}>删除</div>
                            </div>
                        </div>
                        <div className={detailBuild.info}>
                            <div className={n == 1 ? detailBuild.infoAction : ''} onClick={() => {
                                setN(1)
                            }}>基础信息</div>
                            <div className={n == 2 ? detailBuild.infoAction : ''} onClick={() => {
                                setN(2)
                            }}>楼层</div>
                        </div>
                        {n == 1 &&
                            <div>
                                <div className={detailBuild.xiangmu}>
                                    <div className={detailBuild.xiangmuInfo}>
                                        <div>所属项目</div>
                                        <div>北京国贸项目</div>
                                    </div>
                                    <div className={detailBuild.xiangmuInfo}>
                                        <div>项目地址</div>
                                        <div>{item.addr}</div>
                                    </div>
                                    <div className={detailBuild.xiangmuInfo1}>
                                        <div>楼宇简介</div>
                                        <div>{item.build_info}</div>
                                    </div>
                                    <div className={detailBuild.xiangmuInfo1}>
                                        <div>运营方介绍</div>
                                        <div>{item.operator_info}</div>
                                    </div>
                                </div>
                                <img src={getImg(item.img)} alt="" style={{ width: 120, height: 160 }} />
                                <div className={detailBuild.people}>
                                    <span>创建人：李明海</span>
                                    <span>创建时间：2019-08-20 10:30:28</span>
                                </div>
                            </div>
                        }
                        {n == 2 &&
                            <div>
                                <div>{`地上${item.floor}层，地下${item.unfloor}层`}</div>
                                <div className={detailBuild.detailFloor}>
                                    <div className={detailBuild.left} >
                                        {NumberList(item.floor).map((item, index) => {
                                            return (
                                                <div key={index} className={detailBuild.detail1}>
                                                    <span>地上</span>
                                                    <div className={detailBuild.floorNum}>
                                                        <div>{item}</div>
                                                        <span>层</span>
                                                    </div>
                                                </div>
                                            )
                                        })}
                                    </div>
                                    <div className={detailBuild.left} >
                                        {NumberList(item.unfloor).map((item, index) => {
                                            return (
                                                <div key={item} className={detailBuild.detail1}>
                                                    <span>地下</span>
                                                    <div className={detailBuild.floorNum}>
                                                        <div>{item}</div>
                                                        <span>层</span>
                                                    </div>
                                                </div>
                                            )
                                        })}
                                    </div>
                                </div>
                            </div>
                        }
                        <Modal title="此操作是不可恢复的！" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
                            okText="确认"
                            cancelText="取消"
                        >
                            <p>您确认要执行此删除操作吗?</p>
                        </Modal>
                    </div>
                )
            })}

        </div>
    )
}
